<template>

  <view>


    <view class="dm-box">
      <view class="tn-flex tn-flex-row-center tn-margin">
        <view class="tn-text-bold tn-text-xl">累计佣金金额(元):<text class="money">{{ inviteData.total_commission/100 }}</text></view>
      </view>
      <view class="dm-horizontal-line-xl--grey" />
      <view>
        <view class="tn-text-bold">汇总</view>
        <view class="tn-padding-sm">
          <view class="tn-flex tn-flex-row-between">
            <view>好友数：<text class="money">{{inviteData.invite_number}}</text></view>
            <view>好友累计佣金(￥)：<text class="money">￥{{inviteData.invite_commission}}</text></view>
          </view>
          <view class="tn-flex tn-flex-row-between tn-margin-top">
            <view>间接好友数：<text class="money">{{inviteData.invite_number_2}}</text></view>
            <view>间接好友累计佣金(￥)：<text class="money">￥{{ inviteData.invite_commission_2 }}</text></view>
          </view>
        </view>
      </view>
    </view>

    <view >
      <view class="dm-box-shadow tn-margin-top  tn-bg-white" style="min-height: 900px">
        <view class="tn-flex tn-flex-row-between tn-padding">
          <view class="tn-text-bold">好友信息</view>
          <view class="tn-text-bold">间接好友/佣金</view>
        </view>
        <view v-for="(item,index) in inviteList"><!-- 循环-->
          <view class="tn-flex tn-flex-row-between tn-padding">
            <view class="tn-flex tn-flex-direction-row tn-flex-col-center">
              <view class="tn-margin-right-xs"><image src="http://static.playlet.5884.cn/playlet/img/my/avatar.png" style="height: 50px;width: 50px"/></view>
              <view class="tn-flex tn-flex-direction-column tn-color-gray">
                <view class="tn-color-black tn-text-bold">{{ item.nickname || '游客' }}</view>
                <view>ID:{{ item.id.slice(-7) }}</view>
                <view class="tn-text-xs">{{item.register_date | formatDateTime}}</view>
              </view>
            </view>
            <view class="tn-flex tn-flex-direction-row tn-flex-col-center">
              <view class="tn-text-sm dm-color-wechat tn-flex tn-flex-direction-row tn-flex-col-center">
                <view class="tn-flex tn-flex-direction-column">
                  <view>{{item.invite_number || 0}}个成员</view>
                  <view>成员佣金汇总：<text class="tn-text-bold">￥{{ item.invite_commission_2 }}</text></view>
                </view>
                <view class="tn-flex tn-margin tn-text-bold" @click="showChildren(index)">
                  <text class="tn-icon-down" v-if="item.showChildren"/>
                  <text class="tn-icon-right" v-else/>
                </view>
              </view>
              <view class="dm-vertical-line--grey" style="height: 50px"></view>
              <view class="money">￥{{ item.invite_commission }}</view>
            </view>
          </view>
          <view v-for="(item2,index) in item.invite_list" v-if="item.showChildren"> <!-- 循环-->
            <view class="dm-box" >
              <view class="tn-flex tn-flex-row-between">
                <view>间接好友信息(二级)</view>
                <view>佣金</view>
              </view>
              <view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-center">
                  <view class="tn-flex tn-flex-direction-row">
                    <view class="tn-margin-right-xs"><image src="http://static.playlet.5884.cn/playlet/img/my/avatar.png" style="height: 30px;width: 30px"/></view>
                    <view class="tn-flex tn-flex-direction-column tn-color-gray">
                      <view class="tn-color-black tn-text-bold">{{ item2.nickname || '游客' }}</view>
                      <view>ID:{{ item2._id.slice(-7) }}</view>
                    </view>
                  </view>
                  <view class="tn-flex tn-color-gray">{{item2.register_date | formatDateTime}}</view>
                  <view class="tn-flex tn-flex-col-center">
                    <view class="dm-vertical-line--grey" style="height: 30px"></view>
                    <view class="money">￥{{ item2.invite_commission }}</view>
                  </view>
                </view>
                <view class="dm-horizontal-line-md--grey"/>
              </view>
            </view>
          </view>
          <view class="dm-horizontal-line-xl--grey"/>
        </view>
      </view>
    </view>

    <banner-ad :config="adConfig.wx_banner_myInvitee"/>

  </view>
</template>

<script>
import common_mixin from '@/libs/mixin/common_mixin.js'
import UGap from "../../uni_modules/uview-ui/components/u-gap/u-gap.vue";
import BannerAd from "@/components/banner-ad/banner-ad.vue";

export default {
  components: {BannerAd, UGap},
  mixins: [common_mixin],
  name: "my_invitee",
  data() {
    return {

      inviteData:{},
      inviteList:[],
      page:1,
      hasMore:true
    }
  },
  onShow(){
    this.getInviteData();
  },
  async onReachBottom() {
    this.getInviteData();
  },
  methods:{
    showChildren(index) {
      this.inviteList[index].showChildren=!this.inviteList[index].showChildren
      this.$forceUpdate()
    },
    async getInviteData() {
      if (!this.hasMore) {
        return
      }
      let data = await this.$api.invitePanel()
      this.hasMore=data.has_more
      this.inviteData = data;
      this.inviteList=data.invite_list
      this.page++;
    }
  }
}
</script>

<style scoped lang="scss">

</style>
